<template>
  <el-container class="app-container">
    <el-header class="app-header">
      <h1>机场设施分析管理系统</h1>
    </el-header>
    <el-container class="app-content">
      <el-aside width="200px" class="app-sidebar">
        <el-menu
          router
          default-active="/"
          class="el-menu-vertical-demo"
          background-color="#f5f7fa"
          text-color="#303133"
          active-text-color="#409EFF"
        >
          <el-menu-item index="/">
            <el-icon><HomeFilled /></el-icon>
            <span>首页</span>
          </el-menu-item>
          <el-menu-item index="/takeoff-landing">
            <el-icon><Aim /></el-icon>
            <span>起降能力分析</span>
          </el-menu-item>
          <el-menu-item index="/parking">
            <el-icon><Van /></el-icon>
            <span>停机能力分析</span>
          </el-menu-item>
          <el-menu-item index="/oil-supply">
            <el-icon><Odometer /></el-icon>
            <span>油料供应分析</span>
          </el-menu-item>
          <el-menu-item index="/ammunition-supply">
            <el-icon><Aim /></el-icon>
            <span>弹药供应分析</span>
          </el-menu-item>
          <el-menu-item index="/protection">
            <el-icon><Umbrella /></el-icon>
            <span>防护分析</span>
          </el-menu-item>
        </el-menu>
      </el-aside>
      <el-main class="app-main">
        <router-view />
      </el-main>
    </el-container>
  </el-container>
</template>

<script>
import { HomeFilled, Aim, Van, Odometer, Umbrella, LocationInformation } from '@element-plus/icons-vue'

export default {
  name: 'App',
  components: {
    HomeFilled,
    Aim,
    Van,
    Odometer,
    Umbrella,
    LocationInformation
  }
}
</script>

<style>
html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  font-family: 'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', Arial, sans-serif;
}

.app-container {
  height: 100vh;
}

.app-header {
  background-color: #409EFF;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  z-index: 1000;
}

.app-content {
  height: calc(100vh - 60px);
}

.app-sidebar {
  box-shadow: 2px 0 8px rgba(0, 0, 0, 0.05);
}

.app-main {
  background-color: #f5f7fa;
  padding: 20px;
}

.el-menu-item {
  display: flex;
  align-items: center;
}

.el-menu-item .el-icon {
  margin-right: 10px;
}
</style> 